<template>
  <div>
    <!-- 区域一 -->
    <a-card :bordered="false" :body-style="{marginBottom: '20px'}">
      <a-form :form="form">
        <h4 class="form-title"><b>基本信息</b></h4>
        <!-- 第一行 -->
        <a-row :gutter="24" :style="{ marginBottom: '16px' }">
          <a-col :span="8">
            <label class="labeltitle">设备名称:</label> 
            <span class="item-content">{{ this.$route.query.node }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">设备地址:</label> 
            <span class="item-content">{{ this.$route.query.node_alias }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">运行状态:</label> 
            <span class="item-content">
              <a-badge status="success" text="正常" v-if="this.$route.query.status === '0'"/>
              <a-badge status="warning" text="故障" v-if="this.$route.query.status === '1'"/>
              <a-badge status="warning" text="未知" v-if="this.$route.query.status === '-1'"/>
            </span>
          </a-col>
        </a-row>
        <!-- 第二行 -->
        <a-row :gutter="24" :style="{ marginBottom: '16px' }">
          <a-col :span="8">
            <label class="labeltitle">设备厂商:</label> 
            <span class="item-content">{{ this.$route.query.dev_vendor }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">设备类型:</label> 
            <span class="item-content">{{ this.$route.query.dev_type }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">内部标识:</label> 
            <span class="item-content">{{ this.$route.query.dn }}</span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <!-- 区域二 -->
    <!-- <a-divider style="margin-bottom: 32px"/> -->
    <!--
    <a-card :bordered="false">
      <s-table
        style="margin-bottom: 24px"
        row-key=""
        :columns="moduleColumns"
        :data="deviceStaticData">
      </s-table>
    </a-card>
    -->
    <!-- 区域三 -->
    <a-card
      :bordered="false"
      :style="{ marginBottom: '20px'}"
      size="default" 
      title="设备部件状态">
      <a-spin :spinning="loading">
        <a-table
          row-key=""
          size="default"
          :columns="moduleColumns"
          :dataSource="moduleData"
          :pagination="{ pageSize: 10 }"
        >
          <span slot="status" slot-scope="text">
            <a-badge status="success" text="正常" v-if="text === '0'"/>
            <a-badge status="warning" text="离线" v-if="text === '-1'"/>
            <a-badge status="default" text="未知" v-if="text === '-2'"/>
          </span>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { patrolServerDetail } from '@/api/patrol'

export default {
  components: {
    STable,
    Ellipsis
  },

  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      details: {},

      moduleColumns: [
        {
          title: '模块类型',
          dataIndex: 'module',
          key: 'module'
        },
        {
          title: '组件名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '健康状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ],

      moduleData: [],

      deviceDetailData: () => {
        const params = {
          dn: this.$route.query.dn
        }
        return new Promise((resolve, reject) => {
          patrolServerDetail(params).then(
            (res) => {
              resolve(res)
            },
            (error) => {
              console.log(error)
              resolve(error)
            }
          )
        })
      },

      // 加载数据方法: 必须为Promise对象
      deviceStaticData: () => {
        return new Promise(resolve => {
          resolve({
            data: [
              {
                module: 'CPU',
                name: 'CPU1',
                status: '0'
              },
              {
                module: 'Memory',
                name: 'Memory1', 
                status: '0'
              },
              {
                module: 'PSU',
                name: 'Power Supply 1',
                status: '0'
              },
              {
                module: 'PSU',
                name: 'Power Supply 2',
                status: '-1'
              }
            ],
            pageSize: 10,
            pageNo: 1,
            totalPage: 1,
            totalCount: 10
          })
        }).then(res => {
          return res
        })
      },
      
      form: this.$form.createForm(this)
    }
  },

  filters: {
    // TODO: 暂未使用
    statusFilter (status) {
      const statusMap = {
        'processing': '进行中',
        'success': '完成',
        'failed': '失败'
      }
      return statusMap[status]
    }
  },

  computed: {
    // TODO: 暂未使用
    title () {
      return this.$route.meta.title
    }
  },

  mounted () {
    // 接收路由跳转携带参数
    // this.details = this.$route.query

    // 测试用: 模拟静态数据
    // this.getStaticData()

    // 生产用: 发起API请求
    this.getModuleData()
  },

  methods: {
    /*
    healthState (status) {
      const healthStateMap = {
        '0': '正常',
        '-1': '离线',
        '-2': '未知'
      }
      return healthStateMap[status]
    },
    */

    getStaticData () {
      this.moduleData = [
        { 
          module: 'CPU',
          name: 'CPU1',
          status: '0'
        },
        { 
          module: 'Memory',
          name: 'Memory1',
          status: '0'
        },
        { 
          module: 'PSU',
          name: 'Power Supply 1',
          status: '0'
        },
        { 
          module: 'PSU',
          name: 'Power Supply 2',
          status: '0'
        }
      ]
      this.loading = false
    },

    // 生产用
    async getModuleData () {
      this.details = await this.getDeviceDetail()
      const _this = this // 否则foreach内提示异常   
       
      this.details.forEach(function (item) {
        _this.moduleData.push({
          module: item.module_type, 
          name: item.module_name,
          status: item.health_state
        })
      })
      this.loading = false
    },

    getDeviceDetail () {
      const params = {
        dn: this.$route.query.dn
      }
      return new Promise((resolve, reject) => {
        patrolServerDetail(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .form-title {
    color: rgba(0,0,0,.85);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .labeltitle{
    margin-right: 10px;
  }
  .item-content{
    color: #999;
  }
</style>
